<template>
    <div class="main-index">
      <van-image width="100%" :src="img" />
      <section>
        <center class="title"><strong>Realax and shop</strong></center>
        <center class="content">Shop online and get grocories delivered from stores to your home in as fast as 1 hour .</center>
      </section>
      <div class="btns">
        <van-button round block type="primary" class="btn" :to="{name: 'Register'}"><strong>Sign up</strong></van-button>
        <van-button round block type="primary" plain class="btn" :to="{name: 'Login'}" ><strong>Sign in</strong></van-button>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch  } from 'vue'
import Illustration from '../assets/Illustration.png'
const img = Illustration
</script>

<style lang="less" scoped>
.main-index {
  padding: 15px;
  .title {
    color: #7F4E1D;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.165px;
    color: #7F4E1D;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin: 16px 0px;
  }
  .content {
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.165px;
    color: #7F4E1D;
    width: 260px;
    margin: auto;
  }
  .btns {
    padding: 40px 0px;
    .btn {
      margin: 10px 0px;
      strong {
        font-size: 17px;
      }
    }
  }
}
</style>
